<template>
  <div id="bsUser">

    <div class="BtnClass">
        <el-button @click="tianjiadakaiBtn()" type="primary">添加按钮</el-button>
        <el-button @click="dialogTableVisible = true" type="success text">搜索</el-button>
    </div>
   


    <el-table :data="currentData" style="width: 100%">
        <el-table-column label="编号">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="邮箱">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.email }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="在职状态">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.isState }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.sex }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button 
            size="mini" 
             @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
             <el-popconfirm
              confirmButtonText='确定'
              cancelButtonText='取消'
              icon="el-icon-info"
              iconColor="red"
              title="确定删除吗？"
              @onConfirm="handleDelete(scope.$index, scope.row)"
            >
             <el-button
              size="mini"
              type="danger"
              slot="reference"
              >删除</el-button
            >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页element -->
      <div class="block">
        <el-pagination hide-on-single-page
                layout="prev, pager, next"
                :total="pageNum()"
                :page-size="5"
                :pager-count="7"
                :current-page="1"
                @current-change="changePage"
        >
        </el-pagination>
      </div>
      <!-- 编辑FROM -->
      <el-dialog title="编辑" :visible.sync="dialogFormVisible">
        <el-form :model="formData">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="formData.userName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="formData.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="formData.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="在职状态" :label-width="formLabelWidth">
              <el-select v-model="formData.isState" placeholder="是否在职">
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
              <el-select v-model="formData.sex" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="bianjiBtn()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 添加FROM -->
      <el-dialog title="添加" :visible.sync="tjdialogFormVisible">
        <el-form :model="tianjiaData">
          <el-form-item label="名称" :label-width="tjformLabelWidth">
            <el-input v-model="tianjiaData.userName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="tjformLabelWidth">
            <el-input v-model="tianjiaData.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" :label-width="tjformLabelWidth">
            <el-input v-model="tianjiaData.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="在职状态" :label-width="tjformLabelWidth">
            <el-select v-model="tianjiaData.isState" placeholder="是否在职">
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="性别" :label-width="tjformLabelWidth">
            <el-select v-model="tianjiaData.sex" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="tjdialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="tianjiaBtn()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 搜索 -->
      <el-dialog title="查询" :visible.sync="dialogTableVisible">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="查询方式">
            <el-select v-model="formInline.region" placeholder="请选择查询方式">
              <el-option label="ID" value="id"></el-option>
              <el-option label="姓名" value="userName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="内容">
            <el-input v-model="formInline.value" placeholder="请输入搜索内容"></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="searchuser">查询</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="ybssearchData">
          <el-table-column property="id" label="id" width="150"></el-table-column>
          <el-table-column property="userName" label="姓名" width="100"></el-table-column>
          <el-table-column property="email" label="邮箱" width="150"></el-table-column>
          <el-table-column property="phone" label="手机号" width="150"></el-table-column>
          <el-table-column property="isState" label="在职状态" width="150"></el-table-column>
          <el-table-column property="sex" label="性别" width="150"></el-table-column>
        </el-table>
      </el-dialog>
  </div> 
</template>
<script>
import {mapActions} from 'vuex'
export default {
  name: "bsUser",
  data() {
    return {
      currentPage:1,
      //编辑from
        dialogFormVisible: false,
        formLabelWidth:'120px',
        formData:{},
      //添加FROM
        tianjiaData:{
          userName: '',
          email: '',
          phone: '',
          isState: '',
          sex:''
        },
        tjdialogTableVisible: false,
        tjdialogFormVisible: false,
        tjformLabelWidth:'120px',

      //搜索from
       dialogTableVisible: false,
       formInline: {
          value: '',
          region: ''
        }
    };
  },
  computed:{
    currentData(){
      let kaishi = (this.currentPage-1)*5
      let jieshu = (this.currentPage-1)*5 +5
      return this.$store.state.bsStore.tableData.slice(kaishi,jieshu)
    },
    ybssearchData() {
      return this.$store.state.bsStore.searchData
    }
    
  },
  methods:{
    ...mapActions(['bsGetData','bsDelData','bssousuoData']),
    pageNum(){
      return this.$store.state.bsStore.tableData.length
    } ,
    changePage(val){  //使当前页改变为changepage获取到的值
      this.currentPage = val
    },
    handleDelete(index,row){ //删除函数用户
      this.bsDelData(row)
    },
    handleEdit(index,row){ //编辑打开模态框
      this.formData = row
      this.dialogFormVisible = true
    },
    bianjiBtn(){ //编辑BTN确定
      this.dialogFormVisible = false
      let obj = {};
      obj.id = this.formData.id;
      obj.userName = this.formData.userName;
      obj.email = this.formData.email;
      obj.phone = this.formData.phone;
      obj.isState = this.formData.isState;
      obj.sex = this.formData.sex;
      console.log(obj);
      this.$store.dispatch('bsDelData',obj)
    },
    tianjiadakaiBtn(){ //添加BTN模态框
        this.tjdialogFormVisible = true
    },
    tianjiaBtn(){ //添加模态框确定
      this.tjdialogFormVisible = false
        let obj = {};
      obj.userName = this.tianjiaData.userName;
      obj.email = this.tianjiaData.email;
      obj.phone = this.tianjiaData.phone;
      obj.isState = this.tianjiaData.isState;
      obj.sex = this.tianjiaData.sex;
      console.log(obj);
      this.$store.dispatch('bsDelData',obj)
    },
    searchuser(){
      this.bssousuoData(this.formInline)
    }
  },
  created(){
    this.bsGetData()
  }
};
</script>
 
<style scoped lang = "less">
.BtnClass{
  text-align:left;
  padding: 0 0 15px;
}
</style>